import React, { useState, useEffect } from 'react';
import { View, Text, ScrollView, StyleSheet, TextInput, Image, TouchableOpacity, Switch, Modal, Animated, Dimensions, SafeAreaView, Alert, ActivityIndicator, Platform } from 'react-native';
import { Stack, useRouter } from 'expo-router';
import { Ionicons, FontAwesome5, MaterialIcons } from '@expo/vector-icons';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { useAppDispatch, useAppSelector } from '../store/hooks';
import { updateUserInfo, uploadAvatar } from '../services/userService';
import defaultAvatarImage from '../../assets/default_avatar.png';
import * as ImagePicker from 'expo-image-picker';
import { useTheme } from '../context/ThemeContext';

interface Skill {
  id: number;
  name: string;
}

// 选项数据接口
interface OptionItem {
  value: string;
  label: string;
}

export default function EditProfileScreen() {
  const router = useRouter();
  const insets = useSafeAreaInsets();
  const dispatch = useAppDispatch();
  const { currentUser, loading } = useAppSelector(state => state.user);
  const [modalVisible, setModalVisible] = useState(false);
  const [modalMessage, setModalMessage] = useState('');
  const [isSaving, setIsSaving] = useState(false);
  const [avatarError, setAvatarError] = useState(false);
  
  // 使用全局主题
  const { isDarkMode } = useTheme();
  
  // 表单数据
  const [nickname, setNickname] = useState('');
  const [studentId, setStudentId] = useState(''); // 学号不可修改
  const [gender, setGender] = useState('male');
  const [bio, setBio] = useState('');
  
  // 学术信息
  const [grade, setGrade] = useState('');
  const [college, setCollege] = useState('');
  const [major, setMajor] = useState('');
  const [researchDirection, setResearchDirection] = useState('');
  
  // 底部弹出选择器状态
  const [pickerVisible, setPickerVisible] = useState(false);
  const [pickerTitle, setPickerTitle] = useState('');
  const [pickerOptions, setPickerOptions] = useState<OptionItem[]>([]);
  const [pickerSelectedValue, setPickerSelectedValue] = useState('');
  const [currentPickerType, setCurrentPickerType] = useState('');
  
  // 底部动画值
  const [slideAnimation] = useState(new Animated.Value(0));
  
  // 下拉菜单选项数据
  const gradeOptions: OptionItem[] = [
    { value: '大一', label: '大一' },
    { value: '大二', label: '大二' },
    { value: '大三', label: '大三' },
    { value: '大四', label: '大四' },
    { value: '研一', label: '研一' },
    { value: '研二', label: '研二' },
    { value: '研三', label: '研三' },
    { value: '博士生', label: '博士生' },
  ];
  
  const collegeOptions: OptionItem[] = [
    { value: '基础医学院', label: '基础医学院' },
    { value: '临床医学院', label: '临床医学院' },
    { value: '药学院', label: '药学院' },
    { value: '公共卫生学院', label: '公共卫生学院' },
    { value: '护理学院', label: '护理学院' },
    { value: '口腔医学院', label: '口腔医学院' },
    { value: '中医学院', label: '中医学院' },
    { value: '医学检验学院', label: '医学检验学院' },
    { value: '生物医学工程学院', label: '生物医学工程学院' },
    { value: '计算机科学与技术学院', label: '计算机科学与技术学院' },
  ];
  
  const majorOptions: OptionItem[] = [
    { value: '临床医学', label: '临床医学' },
    { value: '基础医学', label: '基础医学' },
    { value: '口腔医学', label: '口腔医学' },
    { value: '预防医学', label: '预防医学' },
    { value: '中医学', label: '中医学' },
    { value: '药学', label: '药学' },
    { value: '护理学', label: '护理学' },
    { value: '医学影像学', label: '医学影像学' },
    { value: '医学检验技术', label: '医学检验技术' },
    { value: '计算机科学与技术', label: '计算机科学与技术' },
    { value: '软件工程', label: '软件工程' },
    { value: '网络工程', label: '网络工程' },
  ];
  
  const researchOptions: OptionItem[] = [
    { value: '临床医学・内科学', label: '临床医学・内科学' },
    { value: '外科学・手术医学', label: '外科学・手术医学' },
    { value: '医学影像・放射诊断', label: '医学影像・放射诊断' },
    { value: '病理学・实验诊断', label: '病理学・实验诊断' },
    { value: '预防医学・公共卫生', label: '预防医学・公共卫生' },
    { value: '中医药学・中西医结合', label: '中医药学・中西医结合' },
    { value: '人工智能・数据科学', label: '人工智能・数据科学' },
    { value: '软件开发・移动应用', label: '软件开发・移动应用' },
    { value: '数据库・大数据', label: '数据库・大数据' },
    { value: '网络安全・密码学', label: '网络安全・密码学' },
  ];
  
  // 联系方式
  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [qq, setQq] = useState('');
  const [wechat, setWechat] = useState('');
  
  // 隐私设置
  const [isPublicProfile, setIsPublicProfile] = useState(true);
  const [isPublicContact, setIsPublicContact] = useState(false);
  const [isPublicAcademic, setIsPublicAcademic] = useState(true);
  
  // 技能管理
  const [skills, setSkills] = useState<Skill[]>([]);
  const [newSkill, setNewSkill] = useState('');
  
  // 头像
  const [avatar, setAvatar] = useState('');
  
  // 默认头像
  const defaultAvatar = Image.resolveAssetSource(defaultAvatarImage).uri;
  
  // 从Redux加载用户数据
  useEffect(() => {
    if (currentUser) {
      setNickname(currentUser.nickname || '');
      setStudentId(currentUser.studentId || '');
      setGender(currentUser.gender || 'male');
      setBio(currentUser.userProfile || '');
      setGrade(currentUser.grade || '');
      setCollege(currentUser.college || '');
      setMajor(currentUser.major || '');
      setResearchDirection(currentUser.researchDirection || '');
      setEmail(currentUser.email || '');
      setPhone(currentUser.phone || '');
      setQq(currentUser.qq || '');
      setWechat(currentUser.wechat || '');
      setAvatar(currentUser.userAvatar || defaultAvatar);
      
      // 处理技能列表
      if (currentUser.skills) {
        const skillsArray = currentUser.skills.split(',');
        const skillObjects = skillsArray.map((skill, index) => ({
          id: index + 1,
          name: skill.trim()
        }));
        setSkills(skillObjects);
      } else {
        setSkills([]);
      }
    }
  }, [currentUser]);
  
  // 显示结果弹窗
  const showResultModal = (message: string): void => {
    setModalMessage(message);
    setModalVisible(true);
  };
  
  // 删除技能
  const removeSkill = (id: number) => {
    setSkills(skills.filter(skill => skill.id !== id));
  };
  
  // 添加技能
  const addSkill = () => {
    if (newSkill.trim() !== '') {
      const newId = skills.length > 0 ? Math.max(...skills.map(s => s.id)) + 1 : 1;
      setSkills([...skills, { id: newId, name: newSkill.trim() }]);
      setNewSkill('');
    }
  };
  
  // 处理表单提交
  const handleSave = async () => {
    if (!currentUser) {
      showResultModal('无法获取用户信息，请重新登录');
      return;
    }
    
    setIsSaving(true);
    
    try {
      // 准备更新数据
      const updatedProfile = {
        userName: nickname, // 使用昵称作为userName
        nickname: nickname,
        gender: gender,
        userProfile: bio,
        grade: grade,
        college: college,
        major: major,
        researchDirection: researchDirection,
        email: email,
        phone: phone,
        qq: qq,
        wechat: wechat,
        skills: skills.map(skill => skill.name).join(','),
      };
      
      // 调用API更新个人资料
      const response = await updateUserInfo(updatedProfile);
      
      // API请求成功
        showResultModal('个人资料更新成功！');
        // 重新获取用户信息，更新Redux状态
        dispatch({ type: 'user/getCurrentUser' });
    } catch (error: any) {
      // 获取错误信息
      const errorMsg = error.response?.data?.message || error.message || '未知错误';
      showResultModal(`更新失败: ${errorMsg}`);
    } finally {
      setIsSaving(false);
    }
  };
  
  // 打开底部选择器
  const openPicker = (type: string, title: string, options: OptionItem[], currentValue: string) => {
    setPickerTitle(title);
    setPickerOptions(options);
    setPickerSelectedValue(currentValue);
    setCurrentPickerType(type);
    setPickerVisible(true);
    
    // 执行弹出动画
    Animated.timing(slideAnimation, {
      toValue: 1,
      duration: 300,
      useNativeDriver: true,
    }).start();
  };
  
  // 关闭底部选择器
  const closePicker = () => {
    // 执行关闭动画
    Animated.timing(slideAnimation, {
      toValue: 0,
      duration: 200,
      useNativeDriver: true,
    }).start(() => {
      setPickerVisible(false);
    });
  };
  
  // 确认选择
  const confirmSelection = () => {
    // 更新对应字段的值
    switch (currentPickerType) {
      case 'grade':
        setGrade(pickerSelectedValue);
        break;
      case 'college':
        setCollege(pickerSelectedValue);
        break;
      case 'major':
        setMajor(pickerSelectedValue);
        break;
      case 'research':
        setResearchDirection(pickerSelectedValue);
        break;
    }
    
    closePicker();
  };
  
  // 底部弹出层动画样式
  const slideInStyle = {
    transform: [
      {
        translateY: slideAnimation.interpolate({
          inputRange: [0, 1],
          outputRange: [300, 0],
        }),
      },
    ],
  };
  
  // 更新并上传头像
  const handleUpdateAvatar = async () => {
    try {
      // 请求相册访问权限
      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
      
      if (status !== 'granted') {
        showResultModal('需要访问相册的权限才能更换头像');
        return;
      }
      
      // 打开相册选择图片
      const result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: 'images',
        allowsEditing: true,
        aspect: [1, 1],
        quality: 0.8,
      });
      
      if (!result.canceled && result.assets && result.assets.length > 0) {
        const selectedImage = result.assets[0];
        
        // 显示加载状态
        setIsSaving(true);
        
        // 创建FormData对象
        const formData = new FormData();
        
        // 获取文件扩展名
        const fileExt = selectedImage.uri.split('.').pop() || 'jpg';
        
        // 添加文件到FormData
        formData.append('file', {
          uri: Platform.OS === 'ios' ? selectedImage.uri.replace('file://', '') : selectedImage.uri,
          name: `avatar.${fileExt}`,
          type: `image/${fileExt === 'jpg' ? 'jpeg' : fileExt}`,
        } as any);
        
        // 调用上传API
        const response = await uploadAvatar(formData);
        
        if (response && response.data) {
          // 更新头像状态
          setAvatar(response.data);
          setAvatarError(false);
          
          // 显示成功消息
          showResultModal('头像更新成功！');
          
          // 重新获取用户信息，更新Redux状态
          dispatch({ type: 'user/getCurrentUser' });
        } else {
          showResultModal('头像上传失败：服务器没有返回有效的头像URL');
        }
      }
    } catch (error: any) {
      showResultModal(`头像上传失败: ${error.message || '上传过程中出现错误'}`);
    } finally {
      setIsSaving(false);
    }
  };
  
  // 加载中状态
  if (loading && !currentUser) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: isDarkMode ? '#121212' : '#FFFFFF' }}>
        <ActivityIndicator size="large" color="#1677FF" />
        <Text style={{ marginTop: 10, fontSize: 16, color: isDarkMode ? '#FFFFFF' : '#333333' }}>加载用户数据中...</Text>
      </View>
    );
  }

  return (
    <>
      <Stack.Screen 
        options={{
          title: '编辑个人资料',
          headerShown: true,
          headerLeft: () => (
            <TouchableOpacity 
              onPress={() => router.back()}
              style={{ paddingLeft: 10 }}
            >
              <Ionicons name="arrow-back" size={24} color={isDarkMode ? '#FFFFFF' : '#333333'} />
            </TouchableOpacity>
          ),
          headerRight: () => (
            <TouchableOpacity 
              onPress={handleSave}
              style={{ paddingRight: 16 }}
              disabled={isSaving}
            >
              {isSaving ? (
                <ActivityIndicator size="small" color="#1677FF" />
              ) : (
                <Text style={{ color: '#1677FF', fontSize: 16, fontWeight: '500' }}>保存</Text>
              )}
            </TouchableOpacity>
          ),
          headerStyle: {
            backgroundColor: isDarkMode ? '#1E1E1E' : '#FFFFFF',
          },
          headerShadowVisible: true,
          headerTintColor: isDarkMode ? '#FFFFFF' : '#333333',
          headerTitleStyle: {
            fontWeight: '600',
            fontSize: 18,
          },
          headerTitleAlign: 'center',
          presentation: 'modal',
        }}
      />

      <ScrollView style={[styles.container, { backgroundColor: isDarkMode ? '#121212' : '#F5F5F5' }]}>
        {/* 头像编辑 */}
        <View style={[styles.avatarSection, { backgroundColor: isDarkMode ? '#1E1E1E' : '#FFFFFF' }]}>
          <Image 
            source={{ uri: avatar || defaultAvatar }}
            style={styles.avatar}
            onError={() => setAvatarError(true)}
          />
          <TouchableOpacity 
            style={styles.changeAvatarButton}
            onPress={handleUpdateAvatar}
          >
            <Ionicons name="camera" size={20} color="#FFF" />
            <Text style={styles.changeAvatarText}>更换头像</Text>
          </TouchableOpacity>
        </View>
        
        {/* 基本信息编辑 */}
        <View style={[styles.sectionContainer, { backgroundColor: isDarkMode ? '#1E1E1E' : '#FFFFFF' }]}>
          <Text style={[styles.sectionTitle, { color: isDarkMode ? '#FFFFFF' : '#333333' }]}>基本信息</Text>
          
          <View style={styles.inputGroup}>
            <Text style={styles.label}>昵称</Text>
            <TextInput
              style={styles.input}
              value={nickname}
              onChangeText={setNickname}
              placeholder="请输入你的昵称"
              placeholderTextColor="#999"
            />
          </View>
          
          <View style={styles.inputGroup}>
            <Text style={styles.label}>学号</Text>
            <TextInput
              style={[styles.input, styles.disabledInput]}
              value={studentId}
              editable={false}
              placeholderTextColor="#999"
            />
            <Text style={styles.helperText}>学号不可修改</Text>
          </View>
          
          <View style={styles.inputGroup}>
            <Text style={styles.label}>性别</Text>
            <View style={styles.radioGroup}>
              <TouchableOpacity
                style={styles.radioOption}
                onPress={() => setGender('male')}
              >
                <View style={[
                  styles.radioButton,
                  gender === 'male' && styles.radioButtonActive
                ]}>
                  {gender === 'male' && <View style={styles.radioButtonInner} />}
                </View>
                <Text style={styles.radioLabel}>男</Text>
              </TouchableOpacity>
              
              <TouchableOpacity
                style={styles.radioOption}
                onPress={() => setGender('female')}
              >
                <View style={[
                  styles.radioButton,
                  gender === 'female' && styles.radioButtonActive
                ]}>
                  {gender === 'female' && <View style={styles.radioButtonInner} />}
                </View>
                <Text style={styles.radioLabel}>女</Text>
              </TouchableOpacity>
            </View>
          </View>
          
          <View style={styles.inputGroup}>
            <Text style={styles.label}>个人简介</Text>
            <TextInput
              style={[styles.input, styles.textArea]}
              value={bio}
              onChangeText={setBio}
              placeholder="请简短介绍一下你自己"
              placeholderTextColor="#999"
              multiline={true}
              numberOfLines={4}
              textAlignVertical="top"
            />
          </View>
        </View>
        
        {/* 学术信息 */}
        <View style={[styles.sectionContainer, { backgroundColor: isDarkMode ? '#1E1E1E' : '#FFFFFF' }]}>
          <Text style={[styles.sectionTitle, { color: isDarkMode ? '#FFFFFF' : '#333333' }]}>学术信息</Text>
          
          <View style={styles.inputGroup}>
            <Text style={styles.label}>年级</Text>
            <TouchableOpacity 
              style={styles.selectInput}
              onPress={() => openPicker('grade', '选择年级', gradeOptions, grade)}
            >
              <Text style={styles.selectText}>{grade || '请选择'}</Text>
              <MaterialIcons name="keyboard-arrow-down" size={24} color="#CCC" />
            </TouchableOpacity>
          </View>
          
          <View style={styles.inputGroup}>
            <Text style={styles.label}>学院</Text>
            <TouchableOpacity 
              style={styles.selectInput}
              onPress={() => openPicker('college', '选择学院', collegeOptions, college)}
            >
              <Text style={styles.selectText}>{college || '请选择'}</Text>
              <MaterialIcons name="keyboard-arrow-down" size={24} color="#CCC" />
            </TouchableOpacity>
          </View>
          
          <View style={styles.inputGroup}>
            <Text style={styles.label}>专业</Text>
            <TouchableOpacity 
              style={styles.selectInput}
              onPress={() => openPicker('major', '选择专业', majorOptions, major)}
            >
              <Text style={styles.selectText}>{major || '请选择'}</Text>
              <MaterialIcons name="keyboard-arrow-down" size={24} color="#CCC" />
            </TouchableOpacity>
          </View>
          
          <View style={styles.inputGroup}>
            <Text style={styles.label}>研究方向</Text>
            <TouchableOpacity 
              style={styles.selectInput}
              onPress={() => openPicker('research', '选择研究方向', researchOptions, researchDirection)}
            >
              <Text style={styles.selectText}>{researchDirection || '请选择'}</Text>
              <MaterialIcons name="keyboard-arrow-down" size={24} color="#CCC" />
            </TouchableOpacity>
          </View>
        </View>
        
        {/* 专业技能 */}
        <View style={[styles.sectionContainer, { backgroundColor: isDarkMode ? '#1E1E1E' : '#FFFFFF' }]}>
          <Text style={[styles.sectionTitle, { color: isDarkMode ? '#FFFFFF' : '#333333' }]}>专业技能</Text>
          
          <View style={styles.skillsContainer}>
            {skills.map((skill) => (
              <View key={skill.id} style={styles.skillTag}>
                <Text style={styles.skillText}>{skill.name}</Text>
                <TouchableOpacity 
                  onPress={() => removeSkill(skill.id)}
                  style={styles.removeSkillButton}
                >
                  <Ionicons name="close" size={16} color="#1677FF" />
                </TouchableOpacity>
              </View>
            ))}
          </View>
          
          <View style={styles.addSkillContainer}>
            <TextInput
              style={styles.addSkillInput}
              value={newSkill}
              onChangeText={setNewSkill}
              placeholder="添加新技能"
              placeholderTextColor="#999"
            />
            <TouchableOpacity 
              style={styles.addSkillButton}
              onPress={addSkill}
              disabled={newSkill.trim() === ''}
            >
              <Text style={styles.addSkillText}>添加</Text>
            </TouchableOpacity>
          </View>
        </View>
        
        {/* 联系方式 */}
        <View style={[styles.sectionContainer, { backgroundColor: isDarkMode ? '#1E1E1E' : '#FFFFFF' }]}>
          <Text style={[styles.sectionTitle, { color: isDarkMode ? '#FFFFFF' : '#333333' }]}>联系方式</Text>
          
          <View style={styles.inputGroup}>
            <Text style={styles.label}>邮箱</Text>
            <TextInput
              style={styles.input}
              value={email}
              onChangeText={setEmail}
              placeholder="请输入邮箱"
              placeholderTextColor="#999"
              keyboardType="email-address"
            />
          </View>
          
          <View style={styles.inputGroup}>
            <Text style={styles.label}>手机号</Text>
            <TextInput
              style={styles.input}
              value={phone}
              onChangeText={setPhone}
              placeholder="请输入手机号"
              placeholderTextColor="#999"
              keyboardType="phone-pad"
            />
          </View>
          
          <View style={styles.inputGroup}>
            <Text style={styles.label}>QQ</Text>
            <TextInput
              style={styles.input}
              value={qq}
              onChangeText={setQq}
              placeholder="请输入QQ号"
              placeholderTextColor="#999"
              keyboardType="number-pad"
            />
          </View>
          
          <View style={styles.inputGroup}>
            <Text style={styles.label}>微信</Text>
            <TextInput
              style={styles.input}
              value={wechat}
              onChangeText={setWechat}
              placeholder="请输入微信号"
              placeholderTextColor="#999"
            />
          </View>
        </View>
        
        {/* 隐私设置 */}
        <View style={[styles.sectionContainer, { backgroundColor: isDarkMode ? '#1E1E1E' : '#FFFFFF' }]}>
          <Text style={[styles.sectionTitle, { color: isDarkMode ? '#FFFFFF' : '#333333' }]}>隐私设置</Text>
          
          <View style={styles.switchGroup}>
            <Text style={styles.switchLabel}>公开个人资料</Text>
            <Text style={styles.switchDesc}>允许其他用户查看您的完整资料</Text>
            <Switch
              trackColor={{ false: '#E0E0E0', true: '#BFD7FF' }}
              thumbColor={isPublicProfile ? '#1677FF' : '#FFF'}
              onValueChange={setIsPublicProfile}
              value={isPublicProfile}
              style={styles.switch}
            />
          </View>
          
          <View style={styles.switchGroup}>
            <Text style={styles.switchLabel}>显示联系方式</Text>
            <Text style={styles.switchDesc}>允许其他用户查看您的联系方式</Text>
            <Switch
              trackColor={{ false: '#E0E0E0', true: '#BFD7FF' }}
              thumbColor={isPublicContact ? '#1677FF' : '#FFF'}
              onValueChange={setIsPublicContact}
              value={isPublicContact}
              style={styles.switch}
            />
          </View>
          
          <View style={styles.switchGroup}>
            <Text style={styles.switchLabel}>显示学术信息</Text>
            <Text style={styles.switchDesc}>允许其他用户查看您的学术信息</Text>
            <Switch
              trackColor={{ false: '#E0E0E0', true: '#BFD7FF' }}
              thumbColor={isPublicAcademic ? '#1677FF' : '#FFF'}
              onValueChange={setIsPublicAcademic}
              value={isPublicAcademic}
              style={styles.switch}
            />
          </View>
        </View>
      </ScrollView>
      
      {/* 结果弹窗 */}
      <Modal
        animationType="fade"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={[styles.modalContent, { backgroundColor: isDarkMode ? '#2D2D2D' : '#FFFFFF' }]}>
            <Text style={[styles.modalText, { color: isDarkMode ? '#FFFFFF' : '#333333' }]}>{modalMessage}</Text>
            <TouchableOpacity 
              style={styles.modalButton}
              onPress={() => {
                setModalVisible(false);
                if (modalMessage.includes('成功')) {
                  router.back();
                }
              }}
            >
              <Text style={styles.modalButtonText}>我知道了</Text>
            </TouchableOpacity>
          </View>
        </View>
      </Modal>
      
      {/* 底部选择器弹出层 */}
      <Modal
        animationType="none"
        transparent={true}
        visible={pickerVisible}
        onRequestClose={closePicker}
      >
        <View style={styles.pickerModalOverlay}>
          <TouchableOpacity 
            style={styles.pickerBackdrop}
            activeOpacity={1}
            onPress={closePicker}
          />
          
          <Animated.View style={[styles.pickerContainer, slideInStyle]}>
            <SafeAreaView style={{ backgroundColor: isDarkMode ? '#2D2D2D' : '#FFFFFF' }}>
              <View style={[styles.pickerHeader, { borderBottomColor: isDarkMode ? '#444444' : '#EFEFEF' }]}>
                <TouchableOpacity onPress={closePicker}>
                  <Text style={[styles.pickerCancelButton, { color: isDarkMode ? '#AAAAAA' : '#999999' }]}>取消</Text>
                </TouchableOpacity>
                
                <Text style={[styles.pickerTitle, { color: isDarkMode ? '#FFFFFF' : '#333333' }]}>{pickerTitle}</Text>
                
                <TouchableOpacity onPress={confirmSelection}>
                  <Text style={styles.pickerConfirmButton}>确定</Text>
                </TouchableOpacity>
              </View>
              
              <ScrollView style={styles.pickerOptionsContainer}>
                {pickerOptions.map((option, index) => (
                  <TouchableOpacity
                    key={index}
                    style={[
                      styles.pickerOption,
                      pickerSelectedValue === option.value && styles.pickerOptionSelected
                    ]}
                    onPress={() => setPickerSelectedValue(option.value)}
                  >
                    <Text 
                      style={[
                        styles.pickerOptionText,
                        pickerSelectedValue === option.value && styles.pickerOptionTextSelected
                      ]}
                    >
                      {option.label}
                    </Text>
                    {pickerSelectedValue === option.value && (
                      <Ionicons name="checkmark" size={20} color="#1677FF" />
                    )}
                  </TouchableOpacity>
                ))}
              </ScrollView>
            </SafeAreaView>
          </Animated.View>
        </View>
      </Modal>
    </>
  );
}

const { width: screenWidth } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
  },
  avatarSection: {
    backgroundColor: '#FFFFFF',
    paddingVertical: 24,
    alignItems: 'center',
  },
  avatar: {
    width: 100,
    height: 100,
    borderRadius: 50,
    marginBottom: 16,
    borderWidth: 3,
    borderColor: '#E1EFFF',
  },
  changeAvatarButton: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#1677FF',
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 20,
  },
  changeAvatarText: {
    color: '#FFFFFF',
    marginLeft: 8,
    fontSize: 14,
    fontWeight: '500',
  },
  sectionContainer: {
    backgroundColor: '#FFFFFF',
    marginTop: 12,
    paddingHorizontal: 16,
    paddingVertical: 16,
  },
  sectionTitle: {
    fontSize: 17,
    fontWeight: 'bold',
    marginBottom: 16,
    color: '#333',
  },
  inputGroup: {
    marginBottom: 16,
    position: 'relative',
  },
  label: {
    fontSize: 15,
    color: '#333',
    marginBottom: 8,
  },
  input: {
    borderWidth: 1,
    borderColor: '#E0E0E0',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 15,
    backgroundColor: '#FFFFFF',
  },
  disabledInput: {
    backgroundColor: '#F5F5F5',
    color: '#999',
  },
  helperText: {
    fontSize: 12,
    color: '#999',
    marginTop: 4,
  },
  textArea: {
    height: 100,
    paddingTop: 10,
  },
  radioGroup: {
    flexDirection: 'row',
    marginTop: 8,
  },
  radioOption: {
    flexDirection: 'row',
    alignItems: 'center',
    marginRight: 24,
  },
  radioButton: {
    width: 20,
    height: 20,
    borderRadius: 10,
    borderWidth: 2,
    borderColor: '#CCC',
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 8,
  },
  radioButtonActive: {
    borderColor: '#1677FF',
  },
  radioButtonInner: {
    width: 10,
    height: 10,
    borderRadius: 5,
    backgroundColor: '#1677FF',
  },
  radioLabel: {
    fontSize: 15,
    color: '#333',
  },
  selectInput: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    borderWidth: 1,
    borderColor: '#E0E0E0',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 12,
    backgroundColor: '#FFFFFF',
  },
  selectText: {
    fontSize: 15,
    color: '#333',
  },
  skillsContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginBottom: 16,
  },
  skillTag: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#E0F0FF',
    borderRadius: 16,
    paddingHorizontal: 12,
    paddingVertical: 6,
    marginRight: 8,
    marginBottom: 8,
  },
  skillText: {
    color: '#1677FF',
    marginRight: 4,
  },
  removeSkillButton: {
    padding: 2,
  },
  addSkillContainer: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  addSkillInput: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#E0E0E0',
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 10,
    fontSize: 15,
    marginRight: 12,
  },
  addSkillButton: {
    backgroundColor: '#1677FF',
    paddingHorizontal: 16,
    paddingVertical: 10,
    borderRadius: 8,
  },
  addSkillText: {
    color: '#FFFFFF',
    fontWeight: '500',
  },
  switchGroup: {
    marginBottom: 20,
    position: 'relative',
    paddingRight: 60,
  },
  switchLabel: {
    fontSize: 16,
    fontWeight: '500',
    color: '#333',
    marginBottom: 4,
  },
  switchDesc: {
    fontSize: 13,
    color: '#999',
  },
  switch: {
    position: 'absolute',
    right: 0,
    top: 0,
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'center',
    alignItems: 'center',
  },
  modalContent: {
    backgroundColor: '#FFFFFF',
    borderRadius: 12,
    padding: 24,
    width: '80%',
    alignItems: 'center',
  },
  modalText: {
    fontSize: 16,
    textAlign: 'center',
    color: '#333',
    marginBottom: 20,
  },
  modalButton: {
    backgroundColor: '#1677FF',
    paddingVertical: 10,
    paddingHorizontal: 24,
    borderRadius: 8,
  },
  modalButtonText: {
    color: '#FFFFFF',
    fontSize: 16,
    fontWeight: '500',
  },
  
  // 底部选择器样式
  pickerModalOverlay: {
    flex: 1,
    justifyContent: 'flex-end',
  },
  pickerBackdrop: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.5)',
  },
  pickerContainer: {
    backgroundColor: '#FFFFFF',
    borderTopLeftRadius: 16,
    borderTopRightRadius: 16,
    width: screenWidth,
    maxHeight: "70%", // 最大高度为屏幕的70%
  },
  pickerHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 12,
    paddingHorizontal: 16,
    borderBottomWidth: 1,
    borderBottomColor: '#EFEFEF',
  },
  pickerTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
  },
  pickerCancelButton: {
    fontSize: 15,
    color: '#999',
    padding: 4,
  },
  pickerConfirmButton: {
    fontSize: 15,
    color: '#1677FF',
    fontWeight: '500',
    padding: 4,
  },
  pickerOptionsContainer: {
    maxHeight: 350,
  },
  pickerOption: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingVertical: 16,
    paddingHorizontal: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#F5F5F5',
  },
  pickerOptionSelected: {
    backgroundColor: '#F0F8FF',
  },
  pickerOptionText: {
    fontSize: 16,
    color: '#333',
  },
  pickerOptionTextSelected: {
    color: '#1677FF',
    fontWeight: '500',
  },
}); 